import React from 'react';
import RcTable from '@components/Table/Table.jsx';
import { Card, Icon } from 'antd';
// import './LevelOneLive.scss';

export default class LevelOneLive extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            radioSelectedKey: [],
            radioSelectedItem: null,

            radioTablePagesize: 10,
            radioTableCurrent: 1,
            checkTablePagesize: 20,
            checkTableCurrent: 1,

            selectedRowKeys: [],
            selectedRows: []
        }
    }

    checkedTable(selectedRowKeys, selectedRows) {
        this.setState({
          selectedRowKeys,
          selectedRows
        })
    }

    checkedRowClick(record, index) {
      let { selectedRowKeys, selectedRows, checkTableCurrent, checkTablePagesize } = this.state;
      let hasIndex = selectedRowKeys.includes(index);
      if (!hasIndex) {
        let num = (checkTableCurrent-1)*checkTablePagesize+index;
        selectedRowKeys.push(num);
        selectedRows.push(record);
        this.setState({
          selectedRowKeys,
          selectedRows
        })
      }
    }

    handleRowClick(record, index) {
        let { radioTableCurrent, radioTablePagesize } = this.state;
        let num = (radioTableCurrent - 1) * radioTablePagesize + index;
        let selectKey = [num];
        this.setState({
          radioSelectedKey: selectKey,
          radioSelectedItem: record
        })
    }

    render() {
        const basicDataSource = [],
              sighDataSource = [];

        for (let i = 0; i < 100; i++) {
            let obj = {
              key: i,
              name: `Edrward ${i}`,
              age: i+1,
              address: `London Park no. ${i}`,
          };
          basicDataSource.push(obj);
          sighDataSource.push(obj);
        }
        
        const BasicColumns = [
            { title: 'Full Name', dataIndex: 'name', key: 'name'},
            { title: 'Age', dataIndex: 'age', key: 'age',sorter: (v1, v2) => v1-v2},
            { title: 'Column 1', dataIndex: 'address', key: '1',
              filterMultiple: false,
              // filteredValue: ['London'], 
              filterIcon: filtered => <Icon type="smile-o" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
              filters: [{
                text: 'London',
                value: 'London',
              }, {
                text: 'New York',
                value: 'New York',
              }]
            },
            { title: 'Column 2', dataIndex: 'address', key: '2'},
            { title: 'Column 3', dataIndex: 'address', key: '3'},
            { title: 'Column 4', dataIndex: 'address', key: '4'},
            { title: 'Column 5', dataIndex: 'address', key: '5'},
            { title: 'Column 6', dataIndex: 'address', key: '6'},
            { title: 'Column 7', dataIndex: 'address', key: '7'},
            { title: 'Column 8', dataIndex: 'address', key: '8' }
        ];

        return (
            <div className="level-one-live">
                <div className="test-table-area">
                    <Card title="多选表格" className="custom-card">
                        <RcTable
                          dataSource={basicDataSource}
                          columns={BasicColumns}
                          rowSelection={{
                              type: " checkbox",
                              selectedRowKeys: this.state.selectedRowKeys,
                              onChange: (selectedRowKeys, selectedRows) => {
                                this.checkedTable(selectedRowKeys, selectedRows)
                              }
                          }}
                          onRow={(record, index) => {
                            return {
                              onClick: () => {
                                this.checkedRowClick(record, index)
                              }, 
                            };
                          }}
                          rowKey={record => record.key}
                          pagination={{
                            current: this.state.checkTableCurrent,
                            pageSize: this.state.checkTablePagesize,
                            showQuickJumper: true,
                            showSizeChanger: true,
                            total: basicDataSource.length,
                            onChange: (page, pagesize) => {
                              this.setState({
                                checkTablePagesize: pagesize,
                                checkTableCurrent: page,
                              })
                            }
                          }}
                        />
                    </Card>



                    <Card title="单选表格" className="custom-card">
                        <RcTable
                            dataSource={sighDataSource}
                            columns={BasicColumns}
                            rowSelection={{
                                type: 'radio',
                                selectedRowKeys:this.state.radioSelectedKey,
                                onChange: (selectedRowKeys, selectedRows) => {
                                  this.handleRowClick(selectedRows[0], selectedRowKeys[0])
                                }
                            }}
                            onRow={(record, index) => {
                                return {
                                  onClick: () => {
                                    this.handleRowClick(record, index)
                                  }, 
                                };
                            }}
                            pagination={{
                              current: this.state.radioTableCurrent,
                              pageSize: this.state.radioTablePagesize,
                              showQuickJumper: true,
                              showSizeChanger: true,
                              total: sighDataSource.length,
                              onChange: (page, pagesize) => {
                                this.setState({
                                  radioTablePagesize: pagesize,
                                  radioTableCurrent: page,
                                })
                              }
                            }}
                            rowKey={record => record.key}
                        />
                    </Card>
                </div>
            </div>
        );
    }
}